import React, {Component, Fragment} from 'react';
import {Empty, Tree, Collapse, Radio} from 'antd';
import {connect} from 'react-redux';
import action from '../../store/actions/specsLibrary';
import SingleElection from './SingleElection';

import './SpecsLibraryRight.scss';

const {TreeNode} = Tree;
const {Panel} = Collapse;

class SpecsLibraryRight extends Component {
  // 点击选择
  onSelect = async (selectedKeys, info) => {
    console.log(selectedKeys, info);
  };

  collapseChange = activeKey => {
    if (activeKey) {
      const actives = activeKey.split(',');
      const key = actives[0];
      const title = actives[1];
      console.log(`key：${key} title：${title}`);
      this.props.ACTIVE_KEY(key);
      this.props.ACTIVE_TITLE(title);
    } else {
      this.props.ACTIVE_KEY(false);
      this.props.ACTIVE_TITLE(false);
    }
  };

  // 自己定义的渲染tree函数
  myRender = data => {
    return data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.cate_title} key={[item.id, item.cate_code]}>
            {/*{this.myRender(item.children)}*/}
          </TreeNode>
        );
      } else {
        return (<TreeNode title={item.cate_title} key={[item.id, item.cate_code]} isLeaf/>);
      }
    });
  };

  render() {
    const {data, isSelsct} = this.props;
    return (
      <div className='SpecsLibraryRight'>
        {
          isSelsct
            ?
            data ?
              <Collapse accordion onChange={this.collapseChange}>
                {
                  data && data.map(item => (
                    <Panel header={`${item.name}`} key={[item.id, item.name]}>
                      <SingleElection arr={item.children} pid={item.id}/>
                    </Panel>
                  ))
                }
              </Collapse>
              : <Empty description={'暂无数据...'}/>
            :
            <Empty description={'暂无数据...'}/>
        }
      </div>
    );
  }
}

const mapStateToProps = state => {
  console.log(state);
  return {
    data: state.specsLibrary.specsData,
    isSelsct: state.specsLibrary.specsIsSelect
  };
};
export default connect(mapStateToProps, action)(SpecsLibraryRight);

